<template>
	<div class="app">
		<my-navbar title="收款明细"></my-navbar>
		<list>
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			         :display="refreshing ? 'show' : 'hide'">
			    <text class="indicator-text">Refreshing ...</text>
			    <loading-indicator class="indicator"></loading-indicator>
			</refresh>
			<cell>
				<div class="payment_item" v-for="item in payMents" @click="toDetail(item.orderId)"> 
					<div class="payment_memo_content"><text class="payment_memo">{{item.memo}}</text></div>
					<div class="payment_money_content" v-if="item.orderSn">
						<text>订单号：{{item.orderSn}}</text>
					</div>
					<div class="payment_money_content" v-if="item.sn&&item.amount>0">
						<text>付款单号：{{item.sn}}</text>
					</div>
					<div class="payment_money_content" v-if="item.sn&&item.amount<0">
						<text>退款单号：{{item.sn}}</text>
					</div>
					<div class="payment_money_content" v-if="item.amount>0">
						<text>付款：{{item.amount|price}}¥</text>
					</div>
					<div class="payment_money_content" v-if="item.amount<0">
						<text class="return_money">退款：{{item.amount|price}}¥</text>
					</div>
					<div class="payment_bottom">
						<text class="click_text">查看详情</text>
					</div>
				</div>
			</cell>
			<loading v-if="payMents.length>=5"  class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
			    <text class="indicator-text">Loading ...</text>
			    <loading-indicator class="indicator"></loading-indicator>
			</loading>
		</list>
	</div>
</template>

<script>
	import {
		selectPaymentDetailRP
	} from '../../api/apiReport.js'
	import myNavbar from '../../components/myNavbar/myNavbar.vue'
	export default {
		data() {
			return {
				id: '',
				refreshing: false,
				loadinging: false,
				pageNum:1,
				payMents: []
			}
		},
		created() {
			this.id = app.config.params
			this.loadPayment()
		},
		components: {
			myNavbar
		},
		filters: {
		    price(value) {
		        var toFixedNum = Number(value).toFixed(3);
		        var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
		        return realVal;
		    },
		    number(value) {
		        var toFixedNum = Number(value).toFixed(0);
		        return toFixedNum;
		    }
		},
		methods: {
			onrefresh(event) {
			    var _this = this
			    this.refreshing = true
			    setTimeout(() => {
			        _this.pageNum = 1;
			        _this.payMents = []
					_this.loadPayment()
			        this.refreshing = false
			    }, 2000)
			},
			onpullingdown(event) {
			    console.log("dy: " + event.dy)
			    console.log("pullingDistance: " + event.pullingDistance)
			    console.log("viewHeight: " + event.viewHeight)
			    console.log("type: " + event.type)
			},
			toDetail(data){
				if(data!=''||data!=undefined||data!=null){
					eeui.openPage({
						url: 'root://pages/order/orderDetails.js',
						params: data,
						statusBarType: 'immersion',
						statusBarStyle: false
					}, result => {
					
					});
				}else{
					  eeui.alert('暂无订单明细', function() {});
					  return
				}
			
			},
			onloading (event) {
			    var _this = this
			
			    this.loadinging = true
			    setTimeout(() => {
			        _this.pageNum = _this.pageNum + 1;
					_this.loadPayment()
			        this.loadinging = false
			    }, 2000)
			},
			loadPayment() {
				selectPaymentDetailRP({
					pageNum:this.pageNum,
					paymentPluginId: this.id
				}).then(res => {
					res.data.data.forEach(item=>{
						this.payMents.push(item)
					})
				})
			},
		}
	}
</script>

<style>
	.app {
		background-color: rgba(248, 248, 248, 0.8);
		flex: 1;

	}

	.payment_item {
		width: 700px;
		padding: 20px;
		box-sizing: border-box;
		margin-left: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
		background-color: white;
		border-radius: 10px;
	}
	.payment_bottom{
		margin-top: 10px;
		border-top-width: 1px;
		border-color: rgba(0,0,0,0.1);
		border-style: solid;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.payment_memo {
		font-size: 28px;
		color: rgba(0, 0, 0, 0.5);
		width: 640px;
		lines: 2;
		text-overflow: ellipsis;
	}
	.payment_money_content{
		margin-top: 10px;
	}
	.payment_sn_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.return_money{
		color: red;
		
	}
	.click_text{
		font-size: 26px;
		color: rgba(83,168,255,1);
		margin-top: 15px;
	}
	.indicator {
	    margin-top: 16px;
	    height: 40px;
	    width: 40px;
	    color: blue;
	}
	.loading {
	    width: 750px;
	    display: -ms-flex;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
	}
	.refresh {
	    width: 750px;
	    display: -ms-flex;
	    display: -webkit-flex;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-align-items: center;
	    -webkit-box-align: center;
	    align-items: center;
	}
	
	.indicator-text {
	    color: #888888;
	    font-size: 42px;
	    text-align: center;
	}
</style>
